<template>
      <div ref="cur" id="mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(carousel,index) in list" :key='index'>
               <img :src="carousel.imgUrl" />
            </div>
          
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
    name:'Carsousel',
    props:['list'],
        watch:{
            list:{
            immediate:true,
            handler(){
                this.$nextTick(()=>{
                    const swiper = new Swiper(this.$refs.cur, {
                         // Optional parameters                          
                         loop: true,
                         // If we need pagination
                         pagination: {
                             el: '.swiper-pagination',
                             clickable:true
                         },
                         // Navigation arrows
                         navigation: {
                             nextEl: '.swiper-button-next',
                             prevEl: '.swiper-button-prev',
                         },
                         });
                })
            }
        }
    }
}
</script>

<style>

</style>